import { Button, Form, Input, message, Typography } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { user, loginTitle } from "../../public/config.json";
import { find } from "lodash";
import { setToken } from "../utils/token";
import { useRouter } from "next/router";

const Login = () => {
  const { replace } = useRouter();
  const [form] = Form.useForm();
  const onFinish = async () => {
    await form.validateFields();
    const isLogin = !!find(user, form.getFieldsValue());
    if (isLogin) {
      message.success("登录成功");
      setToken("aidfauosdfuaopsdufopaijoipweoiqwe");
      replace("/").then();
    } else {
      message.error("账户或密码错误");
    }
  };
  return (
    <div
      className="flex min-h-screen flex-col items-center justify-center bg-[#f0f2f5]"
      style={{
        backgroundImage:
          "url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg)",
      }}
    >
      <Typography.Title>{loginTitle}</Typography.Title>
      <div className="w-[388px] rounded bg-[#ffffff] p-[30px]">
        <Form form={form}>
          <Form.Item
            name="userName"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input
              size="large"
              prefix={<UserOutlined />}
              placeholder="请输入用户名"
            />
          </Form.Item>
          <Form.Item
            name="pwd"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password
              size="large"
              prefix={<LockOutlined />}
              placeholder="请输入密码"
            />
          </Form.Item>
        </Form>
        <Form.Item noStyle>
          <Button type="primary" onClick={onFinish} block>
            登录
          </Button>
        </Form.Item>
      </div>
    </div>
  );
};

export default Login;
